import React, { useEffect } from "react";
import { Button, Image, Stepper, Card } from "antd-mobile";
import "./index.css";
import {
    fetchCart,
    removeFromCart,
    updateCartItem,
    calculateTotalPrice,
} from "../../store/slices/cartSlice";
import { useDispatch, useSelector } from "react-redux";
export default function CartPage() {
    const dispatch = useDispatch();
    const { cart, totalPrice } = useSelector((state) => state.cart);
    const handleQuantityChange = (value, item) => {
        if (value === 0) {
            dispatch(removeFromCart(item.id))
                .unwrap()
                .then(() => {
                    dispatch(calculateTotalPrice());
                });
        } else {
            dispatch(updateCartItem({ id: item.id, quantity: value }))
                .unwrap()
                .then(() => {
                    dispatch(calculateTotalPrice());
                });
        }
    };
    useEffect(() => {
        dispatch(fetchCart());

        dispatch(calculateTotalPrice());
    }, []);
    return (
        <div className="cart-page">
            <div className="cart-title">
                <h2>购物车</h2>
            </div>
            <div className="cart-content">
                {cart.map((item) => (
                    <Card bodyClassName="cart-item">
                        <Image
                            width={80}
                            height={80}
                            src={item.image}
                            style={{
                                borderRadius: "5px",
                            }}
                        />
                        <div className="cart-item-info">
                            <div>
                                <h3>{item.name}</h3>
                                <p className="spec">
                                    规格:
                                    {JSON.stringify(item.selectedSpecs)
                                        .replaceAll('"', "")
                                        .replaceAll(",", " ")
                                        .replaceAll("{", "")
                                        .replaceAll("}", "")}
                                </p>
                                <p>价格: {item.price}元</p>
                            </div>
                            <div className="info-footer">
                                <Stepper
                                    value={item.quantity}
                                    min={0}
                                    onChange={(value) =>
                                        handleQuantityChange(value, item)
                                    }
                                ></Stepper>
                            </div>
                        </div>
                    </Card>
                ))}
            </div>
            <div className="cart-footer">
                <div className="total-price">总价: {totalPrice}元</div>
                <Button color="danger" className="checkout-button">
                    去结算
                </Button>
            </div>
        </div>
    );
}
